<template>
  <div>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="JGXForm"
        :model="JGXForm"
        label-width="85px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="价格项类型">
              <el-select
                clearable
                v-model="JGXForm.price_origin"
                placeholder="请选择"
                filterable
                allow-create
              >
                <el-option label="现货行情" value="0"></el-option>
                <el-option label="期货主力合约行情" value="1"></el-option>
                <el-option label="期货合约行情" value="2"></el-option>
                <el-option label="计算项" value="3"></el-option>
                <el-option label="用户现货行情" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="价格项名称">
              <el-input
                placeholder="请输入内容"
                v-model="JGXForm.name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select
                clearable
                v-model="JGXForm.status"
                placeholder="请选择"
                filterable
                allow-create
              >
                <el-option label="停用" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" style='margin-top:3px;' @click="handle_JGX">
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="small" @click="addJGXList">
        <d2-icon name="plus" />
        新增
      </el-button>
      <el-button type="default" size="small" @click="editJGXList">
        <d2-icon name="edit" />
        修改
      </el-button>
      <!-- <el-button type="default" size="small" icon="el-icon-delete" @click="delJGXList">
        删除
      </el-button> -->
      <!-- <el-button type="default" size="small" @click="examine">
        <d2-icon name="search" />
        查看
      </el-button> -->
      <!-- <el-button type="default" size="small" @click="handleFormSubmit">
        <d2-icon name="download" />
        导入
      </el-button> -->
      <!-- <el-button type="default" size="small" @click="handleFormSubmit">
        <d2-icon name="upload" />
        导出
      </el-button> -->
      <el-button type="default" size="small" @click="StatusJGXList">
        <d2-icon name="unlock" />
        启用
      </el-button>
      <el-button type="default" size="small" @click="noStatusJGXList">
        <d2-icon name="unlock-alt" />
        停用
      </el-button>
      <el-button type="default" size="small" @click="handlerefreshCurrent">
        <d2-icon name="refresh" />
        刷新
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <template slot="header" style="height: 66px">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">价格项</p>
      </template>
      <el-table
        :data="JGXNameList"
        border
        ref="multipleTable" :header-cell-style="{ background: '#eef1f6' }"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column
          type="index" width="50"
          :index="indexMethod"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          sortable width="75"
          :formatter="formatterStatus"
        ></el-table-column>
        <el-table-column prop="id" label="价格项ID" sortable width="105"></el-table-column>
        <el-table-column
          prop="name"
          label="价格项名称"
          sortable width="150"
        ></el-table-column>
        <el-table-column
          prop="price_origin"
          label="价格项来源"
          sortable width="140"
          :formatter="price_originFormat"
        ></el-table-column>
        <el-table-column
          prop="price_unit_name"
          label="单位" width="140"
          sortable
        ></el-table-column>
        <el-table-column
          prop="price_formula"
          label="定价公式" width="450"
          sortable
        ></el-table-column>
        <el-table-column prop="desc" label="备注" sortable width="150"></el-table-column>
      </el-table>
    </el-card>
    <!-- <demo-page-footer
      slot="footer"
      :current="page.pageCurrent"
      :size="page.pageSize"
      :total="page.pageTotal"
      @change="handlePaginationChange"
    /> -->
    <!-- 新增 -->
    <!-- <el-dialog :visible.sync="JGXVisible" title="价格项-新增">
       <div class="mb">
      <el-button type="default" size="small" @click="addRow">
        <d2-icon name="plus" />
        增行
      </el-button>
      <el-button type="default" size="small" icon="el-icon-delete" @click="delData">
        删行
      </el-button>
    </div>
    <el-table :data="jgxtableData" border>
      <el-table-column type="index" :index="indexMethod" label="序号">
      </el-table-column>
      <el-table-column prop="status" label="状态*" sortable>
        <template slot-scope="scope">
           <el-select  clearable v-model="scope.row.status" placeholder="请选择" filterable allow-create>
			         <el-option label="停用" value="0"></el-option>
               <el-option label="启用" value="1"></el-option>
			     </el-select>
         </template>
      </el-table-column>
       <el-table-column prop="name" label="价格项ID" sortable>
        <template slot-scope="scope">
                  <el-input class="remark" v-model="scope.row.name"></el-input>
                </template>
      </el-table-column>
      <el-table-column prop="name" label="价格项名称" sortable>
        <template slot-scope="scope">
                  <el-input class="remark" v-model="scope.row.name"></el-input>
                </template>
      </el-table-column>
       <el-table-column prop="price_origin" label="价格项来源" sortable>
        <template slot-scope="scope">
             <el-select  clearable v-model="scope.row.price_origin" placeholder="请选择" filterable allow-create>
			        <el-option label="现货行情" value="0"></el-option>
               <el-option label="期货主力合约行情" value="1"></el-option>
                <el-option label="期货合约行情" value="2"></el-option>
               <el-option label="计算项" value="3"></el-option>
			     </el-select>
            </template>
      </el-table-column>
      <el-table-column prop="price_unit" label="单位" sortable>
        <template slot-scope="scope">
           <el-select  clearable v-model="scope.row.price_unit" placeholder="请选择" filterable allow-create>
			         <el-option label="元/手" value="0"></el-option>
               <el-option label="元/吨" value="1"></el-option>
			     </el-select>
         </template>
         </el-table-column>
      <el-table-column prop="price_formula" label="定价公式" sortable>
        <template slot-scope="scope">
           <el-input class="remark" v-model="scope.row.price_formula" placeholder="价格项1*权重1+价格项2*权重2"></el-input>
         </template>
      </el-table-column>
      <el-table-column prop="desc" label="备注" sortable>
        <template slot-scope="scope">
          <el-input class="remark" v-model="scope.row.desc"></el-input>
        </template>
      </el-table-column>
    </el-table>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="JGXVisible = false">取消</el-button>
        <el-button type="primary" @click="handle_JGXVisible">保存</el-button
        >
      </span>
    </el-dialog> -->
    <!-- 修改 -->
    <el-dialog :visible.sync="edit_JGXVisible" title="价格项-修改">
      <el-table :data="jgx_edittableData" border>
        <el-table-column type="index" :index="indexMethod" label="序号" width="55">
        </el-table-column>
        <el-table-column prop="id" label="价格项ID" width="100">
          <template slot-scope="scope">
            <el-input class="remark" v-model="scope.row.id" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" sortable width="100">
          <template slot-scope="scope">
            <el-select
              clearable
              v-model="scope.row.status"
              placeholder="请选择"
              filterable
              allow-create
            >
              <el-option label="停用" value="0"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="价格项名称" width="150">
          <template slot-scope="scope">
            <el-input class="remark" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="price_origin" label="价格项来源" width="150">
          <template slot-scope="scope">
            <el-select
              clearable
              v-model="scope.row.price_origin"
              placeholder="请选择"
              filterable
              allow-create
              disabled
            >
              <el-option label="现货行情" value="0"></el-option>
              <el-option label="期货主力合约行情" value="1"></el-option>
              <el-option label="期货合约行情" value="2"></el-option>
              <el-option label="计算项" value="3"></el-option>
              <el-option label="用户现货行情" value="4"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="price_unit" label="单位" sortable>
        <template slot-scope="scope">
           <el-select  clearable v-model="scope.row.price_unit" placeholder="请选择" filterable allow-create>
               <el-option label="元（人民币）/吨" value="0"></el-option>
               <el-option label="元（人民币）/千克" value="1"></el-option>
               <el-option label="元（人民币）/桶" value="2"></el-option>     
               <el-option label="元（人民币）/立方米" value="3"></el-option>
               <el-option label="元（人民币）/张" value="4"></el-option>
               <el-option label="元（人民币）/克" value="5"></el-option>
               <el-option label="元（人民币）/500千克" value="6"></el-option>
			     </el-select>
         </template>
         </el-table-column> -->
        <el-table-column prop="price_formula" label="定价公式" width="280">
          <template slot-scope="scope">
            <el-input
              class="remark"
              v-model="scope.row.price_formula"
              disabled
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="备注">
          <template slot-scope="scope">
            <el-input class="remark" v-model="scope.row.desc"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="edit_JGXVisible = false">取消</el-button>
        <el-button type="primary" @click="handleedit_JGXVisible"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DemoPageFooter from "../../../../../components/PageFooter";
// import priceItem_M from "../../componnets/merchandise_news/model/priceItem_M.vue";
import { conPriceitem, addPriceitem } from "../../../../../api/url_lcc";
export default {
  //商品信息-现货信息
  name: "spotInformation",
  components: {
    "demo-page-footer": DemoPageFooter,
    // "v-priceItem": priceItem_M
  },
  data() {
    return {
      JGXVisible: false,
      edit_JGXVisible: false,
      JGXNameList: {},
      JGXForm: {
        price_origin: "",
        name: "",
        status: "",
      },
      page: {
        pageCurrent: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      row: "",
      currentRow: {},
    };
  },
  created() {
    this.tabledatas.map((i) => {
      i.show = false;
      return i;
    });
  },
  methods: {
    // 价格项
    formatterStatus(row, column) {
      return row.status == 0 ? "停用" : "启用";
    },
    price_originFormat(row, column) {
      if (row.price_origin === "0") {
        return "现货行情";
      } else if (row.price_origin === "1") {
        return "期货主力合约行情";
      } else if (row.price_origin === "2") {
        return "期货合约行情";
      } else if (row.price_origin === "3") {
        return "计算项";
      } else if (row.price_origin === "4") {
        return "用户现货行情";
      }
    },
    DWFormat(row, column) {
      if (row.price_unit === "0") {
        return "元（人民币）/吨";
      } else if (row.price_unit === "1") {
        return "元（人民币）/千克";
      } else if (row.price_unit === "2") {
        return "元（人民币）/桶";
      } else if (row.price_unit === "3") {
        return "元（人民币）/立方米";
      } else if (row.price_unit === "4") {
        return "元（人民币）/张";
      } else if (row.price_unit === "5") {
        return "元（人民币）/克";
      } else if (row.price_unit === "6") {
        return "元（人民币）/500千克";
      }
    },
    // 价格项查询
    handle_JGX() {
      let params = {
        name: this.JGXForm.name || "",
        status: this.JGXForm.status || "",
        price_origin: this.JGXForm.price_origin || "",
      };
      conPriceitem(params)
        .then((res) => {
          // if (res.errcode === "1") {
          this.$message.success(res.result);
          this.JGXNameList = [];
          var data = res.result;
          for (var i = 0; i < data.length; i++) {
            this.JGXNameList[i] = {
              status: data[i]["status"].toString(),
              id: data[i]["id"],
              name: data[i]["name"],
              price_origin: data[i]["price_origin"].toString(),
              price_unit_name: data[i]["price_unit_name"],
              price_formula: data[i]["price_formula"],
              desc: data[i]["desc"],
            };
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //  新增
    addJGXList() {
      // this.JGXVisible = true
      this.$router.push({
        path: "/priceItem_M",
      });
    },

    // 修改
    // editJGXList(){
    //    this.edit_tableDataList()
    // },
    // 修改回显
    editJGXList() {
      var data = this.multipleSelection;
      if (this.multipleSelection == undefined) {
        this.openMessage();
      } else if (this.multipleSelection.length !== 1) {
        this.$message.error("修改只能选中一条数据进行！");
      } else {
        this.edit_JGXVisible = true;
        this.jgx_edittableData = this.multipleSelection;
      }
    },
    // 修改保存
    handleedit_JGXVisible() {
      let params = {
        operation: "MOD",
        price_item: this.jgx_edittableData[0],
      };
      addPriceitem(params)
        .then((res) => {
          // if (res.errcode === "1") {
          this.$message.success(res.result);
          this.edit_JGXVisible = false;
          this.handle_JGX();
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 删除
    delJGXList() {
      if (this.multipleSelection == undefined) {
        this.openMessage();
      } else {
        this.del_message();
      }
    },
    del_message1() {
      var data = this.multipleSelection;
      var Newdata = [];
      data.forEach(function (item, index) {
        var data1 = item.id;
        Newdata.push(data1);
        console.log(90, data1, 91, Newdata);
      });
      let params = {
        operation: "DEL",
        price_item: Newdata,
      };
      addPriceitem(params)
        .then((res) => {
          // if (res.errcode === "1") {
          this.$message.success(res.result);
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 删除提示信息
    del_message() {
      this.$confirm("是否删除该商品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del_message1();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 启用/停用
    StatusJGXList() {
      if (this.multipleSelection == undefined) {
        this.openMessage();
      } else {
        var data = this.multipleSelection;
        var Newdata = [];
        data.forEach(function (item, index) {
          var data1 = item.id;
          Newdata.push(data1);
          console.log(90, data1, 91, Newdata);
        });
        let params = {
          operation: "STATUS",
          price_item: Newdata,
        };
        addPriceitem(params)
          .then((res) => {
            // if (res.errcode === "1") {
            this.$message.success(res.result);
            this.handle_JGX();
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      }
    },
    noStatusJGXList() {
      if (this.multipleSelection == undefined) {
        this.openMessage();
      } else {
        var data = this.multipleSelection;
        var Newdata = [];
        data.forEach(function (item, index) {
          var data1 = item.id;
          Newdata.push(data1);
          console.log(90, data1, 91, Newdata);
        });
        let params = {
          operation: "STATUS",
          price_item: Newdata,
        };
        addPriceitem(params).then((res) => {
          if (res.errcode === "1") {
            this.$message.success(res.result);
            this.handle_JGX();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    // 刷新
    handlerefreshCurrent() {
      (this.JGXForm.price_origin = ""),
        (this.JGXForm.name = ""),
        (this.JGXForm.status = ""),
        this.handle_JGX();
    },
    // 行内编辑
    handleCellDataChange({ rowIndex, key, value, row }) {
      console.log(rowIndex);
      console.log(key);
      console.log(value);
      console.log(row);
    },

    // 单选
    handleCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("删除1", this.multipleSelection);
    },
    // 获取表格选中时的数据
    selectRow(val) {
      this.selectlistRow = val;
    },
    // 增加行
    addRow() {
      var list = {
        rowNum: this.rowNum,
        name: "",
        status: 1,
        price_origin: "",
        price_unit: "",
        price_formula: "",
        desc: "",
      };
      this.jgxtableData.unshift(list);
      this.rowNum += 1;
    },
    // 删除方法
    // 删除选中行
    delData() {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow;
        val.forEach((val, index) => {
          this.jgxtableData.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.jgxtableData.splice(i, 1);
            }
          });
        });
      }
      // 删除完数据之后清除勾选框
      this.$refs.table.clearSelection();
    },
  },
  mounted() {
    this.handle_JGX();
  },
};
</script>
<style></style>
